<template>
  <div class="container">
    <el-form
      ref="form"
      size="small"
      :rules="rules"
      :model="form"
      label-width="80px"
    >
      <el-form-item label="帐号" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item
        :label="$route.query.id ? '重置密码' : '编辑密码'"
        prop="password"
      >
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="权限" prop="auth">
        <el-tree
          ref="authTree"
          :data="routeArr"
          show-checkbox
          node-key="id"
          :default-checked-keys="form.auth"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { asyncRoutes } from '@/router'
import { addAdmin, saveAdmin } from '@/api/auth-mng'
export default {
  name: 'AdminEdit',

  components: {},
  data() {
    return {
      dataSubmit: this.$route.query.id ? saveAdmin : addAdmin,
      form: {
        username: null,
        password: null
      },
      rules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          {
            required: !this.$route.query.id,
            message: '请填写密码',
            trigger: 'blur'
          }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },

  computed: {
    routeArr: function() {
      const arr = []

      for (let i = 0; i < asyncRoutes.length; i++) {
        const children = []
        const obj = asyncRoutes[i]
        if (obj.meta) {
          obj.title = obj.meta.title
          obj.id = obj.meta.id
        }
        if (obj.children && obj.id) {
          for (let j = 0; j < obj.children.length; j++) {
            const obj_c = obj.children[j]
            obj_c.title = obj.children[j].meta.title
            obj_c.id = obj.children[j].meta.id
            children.push(obj_c)
          }
          obj.children = children
        }
        if (obj.id) arr.push(obj)
      }
      return arr
    }
  },

  watch: {},

  created() {
    if (this.$route.query.id) {
      this.form.username = this.$route.params.name
      this.form.auth = this.$route.params.auth[0]
    }
  },

  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (!this.$refs.authTree.getCheckedKeys().length) {
          //   this.$message("请选择权限");
          //   return;
          // }
          this.dataSubmit({
            id: this.$route.query.id,
            name: this.form.username,
            password: this.form.password,
            auth_rule: [
              this.$refs.authTree.getCheckedKeys(),
              this.$refs.authTree.getHalfCheckedKeys()
            ]
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.$route.query.id ? '修改成功' : '添加成功',
                type: 'success'
              })
              this.$router.go(-1)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="" scoped></style>
